<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box1 {

            width: 100%;
            height: 630px;
            background-color: grey;
            display: none;

        }

        .box2 {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 400px;
            height: 300px;
            transform: translate(-50%, -50%);
            background-color: hotpink;
            z-index: 9999;
            display: none;
            cursor: pointer;
        }

        span {
            position: absolute;
            width: 20px;
            height: 20px;
            right: -10px;
            top: -10px;
            background-color: white;
            text-align: center;
            border-radius: 50%;
            cursor: pointer;
        }

        p {
            position: absolute;
            text-align: center;
            width: 100px;
            height: 30px;
            font-size: 20px;
            cursor: pointer;
            left: 50%;
            z-index: 100;

        }
    </style>
</head>

<body>
    <p>
        点击 显示
    </p>
    <div class="box1">
        <!-- <p>
            点击 显示
        </p> -->
    </div>
    <div class="box2">
        <span>X</span>
    </div>
    <script>
        var box1 = document.querySelector('.box1')
        var box2 = document.querySelector('.box2')
        var span = document.querySelector('span')
        var dian = document.querySelector('p')
        console.log(dian);
        dian.addEventListener('click', function () {
            box1.style.display = "block"
            box2.style.display = "block"
        })
        span.addEventListener('click', function () {
            box1.style.display = "none"
            box2.style.display = "none"
        })
        box2.addEventListener('mousedown', function (e) {
            var x = e.pageX - box2.offsetLeft
            var y = e.pageY - box2.offsetTop
            document.addEventListener('mousemove', move)

            function move(e) {
                box2.style.left = e.pageX - x + 'px'
                box2.style.top = e.pageY - y + 'px'
            }
            box2.addEventListener("mouseup", function () {
                document.removeEventListener("mousemove", move)
            })
        })
    </script>
</body>

</html>